<template>
<!--反馈建议模块-->
  <div>
    <el-alert style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px" :closable="false" title="反馈建议"  />
    <el-form :inline="true" class="demo-form-inline">
      <el-button v-if="hasAuth('views.suggest.suggest.suggest.add')" style="margin-left: 25px" type="primary" @click="dialogFormVisible = true"><i class="el-icon-circle-plus-outline"></i>添加建议</el-button>
    </el-form>
    <el-divider></el-divider>
    <el-dialog title="添加反馈建议" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="建议内容" prop="content" :label-width="formLabelWidth">
          <el-input v-model="addForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    <div class="table">-->
    <el-table class="content" tooltip-effect="dark"
              border :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
              :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="createBy" label="建议人" align="center"/>
      <el-table-column prop="content" label="建议内容" align="left"/>
      <el-table-column prop="createTime" label="提出时间" align="center" />
      <el-table-column prop="updateBy" label="回复人" align="center">
        <template slot-scope="scope">
          <!--          <el-tag v-if="scope.row.statu == '0'" size="small" type="danger">未处理</el-tag>-->
          <span v-if="scope.row.statu == '1'" size="small" type="success">{{scope.row.updateBy}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reply" label="回复内容" align="left"/>
      <el-table-column prop="updateTime" label="回复时间">
        <template slot-scope="scope">
          <!--          <el-tag v-if="scope.row.statu == '0'" size="small" type="danger">未处理</el-tag>-->
          <span v-if="scope.row.statu == '1'" size="small" type="success">{{scope.row.updateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="statu" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.statu == '0'" size="small" type="danger">未处理</el-tag>
          <el-tag v-if="scope.row.statu == '1'" size="small" type="success">已处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        v-if="hasAuth('views.suggest.suggest.suggest.update')"
        width="150px" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.statu == '0' && hasAuth('views.suggest.suggest.suggest.update')" type="text"  @click="editHandle(scope.row.id)">处理</el-button>
          <el-button v-if="scope.row.statu == '1' && hasAuth('views.suggest.suggest.suggest.update')" type="text"  @click="editHandle(scope.row.id)">重新处理</el-button>
          <el-divider v-if="hasAuth('views.suggest.suggest.suggest.update')" direction="vertical"></el-divider>
          <template>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="deleteFactory(scope.row)"
              v-if="hasAuth('views.suggest.suggest.suggest.delete')"
            >
              <el-button  slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      style="align-content: center; align-items: center; margin-left: 15px"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :total="totalCount"
      :page-size="PageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <el-dialog title="处理反馈建议" :visible.sync="editFormDialog">
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="建议内容" :label-width="formLabelWidth">
          <el-input disabled v-model="editForm.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="回复内容" :label-width="formLabelWidth">
          <el-input v-model="editForm.reply" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editSubmit()">确 定</el-button>
        <el-button @click="editFormDialog = false">取 消</el-button>

      </div>
    </el-dialog>
  </div>
  <!--  </div>-->
</template>

<script>
import {validatePhone} from "@/utils/validator";
import {deepCopy} from "@/utils";
import authorization from '../../utils/authorization'

export default {
  name: "department",
  data() {
    return {
      dialogFormVisible: false,
      updateForm : false,
      //添加表单的数据
      tableData: [],
      // 默认显示第几页
      currentPage:1,
      // 个数选择器（可修改）
      pageSizes:[1,2,3,4,5,6,7,8,9,10],
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:1,
      // 个数选择器（可修改）
      PageSize:10,
      addForm: {},
      rules:{
        content:[{required:true,message:'建议内容不能为空',trigger:'blur'}],
      },
      formLabelWidth: '120px',
      searchForm:{},
      editForm: {},
      editFormDialog:false,
    };
  },

  mounted() {
    this.load();
  },

  methods : {
    editHandle(id) {
      this.axios.get('/suggest/info/' + id).then(res => {
        this.editForm = res.data;
        this.editFormDialog = true;
      })
    },
    editSubmit() {
      this.editForm.statu = '1';
      this.axios.post('/suggest/update', this.editForm).then(resp => {
        if (resp.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
            onClose: () => { //关闭回调
            }
          });
          this.load();
          this.editFormDialog = false
          this.editForm = {}
        }
      })
    },
    //添加表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.addForm.statu = 0
          this.axios.post('/suggest/add', this.addForm).then(resp => {
            if (resp.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                onClose: () => { //关闭回调
                }
              });
              this.load();
              this.dialogFormVisible = false
              this.addForm = {}
            }
          })
        }
      })
    },
    deleteFactory(row) {
      this.axios.get('/suggest/delete/' + row.id,).then(
        (resp) => {
          this.load()
        }
      )
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize=val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
    },

    load() {
      if (this.hasAuth('views.suggest.suggest.suggest.update'))
      {
        this.searchForm = {}
      } else {
        this.searchForm.createBy = JSON.parse(localStorage.getItem("user")).username
      }
      this.axios.post('/suggest/select',this.searchForm).then((resp) => {
          this.tableData = resp.data;
          this.totalCount = resp.data.length
        }
      )
    },
    hasAuth(url) {
      let auth = this.$store.state.menu.authorizationList
      return auth.indexOf(url) > -1
    }
  }
}
</script>

<style scoped>
.table {
  border-radius: 5px;
  margin: 10px;
  background-color: #FAFAFA;
  /*text-align: center;*/
}
.content {
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #EEFF99;

  /*margin-right: 15px;*/
  /*margin-left: 15px;*/
}
.el-table {
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
  width: 98%;
}
</style>
